import { FC, ReactElement, useEffect, useState } from 'react'
import {
  EvaluationStateType,
  Loading,
  Dispatch,
  useLocation,
  connect,
  Location
} from 'umi'
import { Table, Progress } from 'antd'
import UnUploadSchool from '../unUpload-school'
import styles from './index.less'
interface IProps {
  dispatch: Dispatch
  evaluationModel: EvaluationStateType
}
const UploadDetail: FC<IProps> = ({
  dispatch,
  evaluationModel
}): ReactElement => {
  const { schoolProgress } = evaluationModel
  const location = useLocation()
  const [pageNum, setPageNum] = useState<number>(1)
  const [pageSize, setPageSize] = useState<number>(10)
  const [total, setTotal] = useState<number>(0)
  const [modalShow, setModalShow] = useState<boolean>(false)
  const [questionCode, setQuestionCode] = useState<string>('')
  const { batchCode } = (location as Location).query!

  const handlePageChange = (page: number, pageSize: number) => {
    setPageNum(page)
    setPageSize(pageSize)
  }

  const paginationProps = {
    current: pageNum, //当前页码
    pageSize, // 每页数据条数
    showTotal: () => <span>总共{total}项</span>,
    total, // 总条数
    onChange: (page: number, pageSize: number) =>
      handlePageChange(page, pageSize), //改变页码的函数
    hideOnSinglePage: false,
    showSizeChanger: true
  }
  // 学校上传进度查询
  const getUploadProgress = () => {
    dispatch({
      type: 'evaluationModel/function_getUploadProgress',
      payload: { batchCode }
    })
  }

  const checkDetail = (questionCode: string) => {
    setQuestionCode(questionCode)
    setModalShow(true)
  }

  const columns: any[] = [
    {
      title: '序号',
      key: 'index',
      render: (text: string, record: any, index: number) => {
        return (
          <span>
            {((pageNum - 1) * pageSize + index + 1).toString().padStart(2, '0')}
          </span>
        )
      },
      align: 'center'
    },
    {
      title: '项目名称',
      dataIndex: 'title',
      key: 'title',
      align: 'center'
    },
    {
      title: '已传数量',
      dataIndex: 'count',
      key: 'count',
      align: 'center'
    },
    {
      title: '总共数量',
      dataIndex: 'total',
      key: 'total',
      align: 'center'
    },
    {
      title: '上传进度',
      dataIndex: 'progress',
      key: 'progress',
      render: (text: string, record: any) => {
        return (
          <Progress
            percent={Math.round((record.count / record.total) * 10000) / 100}
          ></Progress>
        )
      },
      align: 'center'
    },
    {
      title: '未传学校',
      key: 'unLoad',
      render: (text: string, record: any) => {
        return (
          <span
            className={styles['check-detail']}
            onClick={() => checkDetail(record.code)}
          >
            查看详情
          </span>
        )
      },
      align: 'center'
    }
  ]

  useEffect(() => {
    getUploadProgress()
  }, [])
  useEffect(() => {
    setTotal(schoolProgress.length)
  }, [schoolProgress])
  return (
    <>
      <div className={styles['page-container']}>
        <div className={styles.pannel}>
          <div className={styles['pannel-title']}>数据上传</div>
          <div className={styles['pannel-content']}>
            <Table
              dataSource={schoolProgress}
              columns={columns}
              rowKey="code"
              pagination={paginationProps}
            />
          </div>
        </div>
      </div>

      <UnUploadSchool
        visible={modalShow}
        payload={{
          batchCode: batchCode as string,
          questionCode
        }}
        hide={() => setModalShow(false)}
      />
    </>
  )
}

const mapStateToProps = ({
  evaluationModel,
  loading
}: {
  evaluationModel: EvaluationStateType
  loading: Loading
}) => {
  return {
    evaluationModel,
    evaluationLoding: loading.models.evaluationModel
  }
}

export default connect(mapStateToProps)(UploadDetail)
